<template>
  <ul class="menu">
    <li v-for="item in menu" @click="openLink(item)">
      <p>{{ item.name }}</p>
    </li>
  </ul>
</template>
<script lang="ts">
import menu from '../router';
export default {
  name: 'menu-list',
  data: () => ({
    menu: menu,
  }),
  inject: ['history', 'publicPath'],
  methods: {
    openLink(item) {
      this.history.push(this.publicPath + item.path);
    },
  },
};
</script>
<style lang="scss" scoped>
.menu {
  color: aliceblue;
  background-color: #333;
  min-width: 90px;
  padding: 0;
  margin: 0;
  li {
    height: 40px;
    line-height: 1;
    list-style: none;
    padding-inline-start: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      background-color: aquamarine;
    }
  }
}
</style>
